<template>
<view>
<view class="topView">
			<view class="title">
				Hi，您好！
			</view>
			<view class="title1">
				您是否遇到了一下问题？
			</view>
			<view class="contentView">
				<view class="flex-row-flex-end">
					<image class="problemImage" :src="problemimg" mode="scaleToFill"></image>
				</view>
				<view class="title2">
					常见问题
				</view>
				<view v-for="(item,index) in newsList" :key="index" :data-id="item.id" @tap="goPage">
					<view  @click="itemClick(item)" class="item flex-row-space-between">
					<view class="itemTitle">
						{{item.title}}
					</view>
						<u-icon name="arrow-right" size="16" color="#666666"></u-icon>
					</view>
				</view>
			</view>
			
			<view @click="buttonClick()" class="button flex-row-center">
				联系客服（{{appConfig.kf_mobile}}）
			</view>
			
		</view>
</view>
</template>

<script>

import { getCategoryList, getArticleList } from '../../api/new';
import { loadingType } from '../../utils/type';
import swipers from "../../components/swipers/swipers";
import {loadingFun} from '@/utils/tools'
	import {
		mapGetters,
		mapActions
	} from 'vuex'

export default {
  data() {
    return {
      active: 0,
      showLoading: true,
      categoryList: [],
      newsList: [],
      page: 1,
      status: loadingType.LOADING,
      bannerList: [],
      type: 0,
	  mobile:'',
	  problemimg:this.$config.imgURL+'problemimg.png'
    };
  },

  components: {
    swipers,
  },
  
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //分类id
    this.id = options.id; //type存在则为帮助中心

    this.type = options.type || '';
    
    // if (this.type) {
    //   uni.setNavigationBarTitle({
    //     title: '帮助中心'
    //   });
    // } else {
    //   uni.setNavigationBarTitle({
    //     title: '商城资讯'
    //   });
    // }

    this.getCategoryListFun();
	

	
  },

  onReachBottom: function () {
    this.getArticleListFun();
  },
  
  computed: {
  	...mapGetters(["appConfig"])
  	
  },


  methods: {
	 buttonClick(){
		 console.log(this.appConfig.kf_mobile)
		 var mobile = this.appConfig.kf_mobile
	 	uni.makePhoneCall({
	 		phoneNumber:`${mobile}`
	 	})
		// uni.makePhoneCall({
		// 	phoneNumber:'18500972540'
		// })
	 },
    changeActive(e) {
      this.active = e;
      this.page = 1;
      this.newsList = [];
      this.status = loadingType.LOADING
      setTimeout(() => {
        this.getArticleListFun();
      }, 100);
    },

    getCategoryListFun() {
      getCategoryList({
        type: this.type
      }).then(res => {
        if (res.code == 1) {
            this.categoryList = res.data
            console.log(this.categoryList)
            this.getArticleListFun();
        }
      });
    },

    getArticleListFun() {
      let {
        active,
        page,
        newsList,
        status
      } = this;
      loadingFun(getArticleList, page, newsList, status, {
        type: this.type,
        id: active ? active.toString() : '',
        page_no: page}).then(res => {
            if(res) {
                this.page = res.page;
                this.newsList = res.dataList
                this.status = res.status
            }
        })
    },

    goPage(e) {
      let {
        id
      } = e.currentTarget.dataset;
      uni.navigateTo({
        url: `/pages/news_details/news_details?id=${id}&type=${this.type}`
      });
    }

  },
  
  onShow() {
	  // this.changeActive()
  }
};
</script>
<style lang="scss">
.topView{
	height: 502rpx;
	background: linear-gradient(180deg, #65BEFF 0%, rgba(101,190,255,0) 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.title{
	padding-top: 214rpx;
	margin-left: 46rpx;
	font-size: 42rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #0E9AFF;
}
.title1{
	
	margin-left: 46rpx;
	font-size: 31rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #56B8FF;
}
.contentView{
	padding-bottom: 20rpx;
	margin: 30rpx;
	margin-top: 60rpx;
	background: #FFFFFF;
	border-radius: 15rpx 15rpx 15rpx 15rpx;
	opacity: 1;
}
.problemImage{
	margin-top: -200rpx;
	width: 310rpx;
	height: 246rpx;
}
.title2{
	// margin-top: 10rpx;
	margin-left: 30rpx;
	margin-bottom: 20rpx;
	font-size: 31rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 550;
	color: #333333;
}
.item{
	width: 100%;
	padding: 0 30rpx;
	height: 80rpx;
}
.button{
	font-size: 27rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	margin: 26rpx 20rpx;
	height: 86rpx;
	background: #65BEFF;
	border-radius: 69rpx 69rpx 69rpx 69rpx;
	opacity: 1;
}

</style>